<template>
	<view class="friendsCircle-content-item">
		<image class="friendsCircle-content-avatar" :src="content.avatar" mode="aspectFill"></image>
		<view class="friendsCircle-content-right">
			<view class="friendsCircle-content-nikeName">{{ content.nikeName }}</view>
			<view class="friendsCircle-content-text">{{ content.text }}</view>
			<view class="friendsCircle-content-imgs" v-if="content.topicType=='IMAGE'&&content.files.length>0">
				<image v-for="(item, ii) in content.files" :key="ii" class="friendsCircle-content-img" :class="'fci' + content.files.length" :src="item.url" mode="aspectFill" @click="pimgs(content.files,ii)"></image>
			</view>
			<view class="friendsCircle-content-video" @click="openVideo(content.files[0].videoUrl)" v-if="content.topicType=='VIDEO'&&content.files.length>0">
				<image class="friendsCircle-content-video-icon" src="../../static/img/bf.png" mode="aspectFill"></image>
				<image class="friendsCircle-content-video-img" :src="content.files[0].url" mode="aspectFill"></image>
			</view>
			<view v-if="content.location" class="friendsCircle-content-location" @click="goMap(content.location)">{{ content.location.name }}</view>
			<view class="friendsCircle-content-tools">
				<view class="friendsCircle-content-time">{{ content.time }}</view>
				<view class="friendsCircle-content-tool" :class="{ 'tabon': tabToolIndex }">
					<view class="wxfont caidan" @click="tabTool(i)"></view>
					<view class="friendsCircle-content-tool-absolute">
						<view class="friendsCircle-popup">
							<view class="friendsCircle-popup-item" @click="zan(content)">
								<view class="friendsCircle-popup-icon wxfont zan"></view>
								<view class="friendsCircle-popup-text" v-if="content.like=='Y'">取消</view>
								<view class="friendsCircle-popup-text" v-else>赞</view>
							</view>
							<view class="friendsCircle-popup-item" @click="comment(content)">
								<view class="friendsCircle-popup-icon wxfont pinglun"></view>
								<view class="friendsCircle-popup-text">评论</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
	<view class="friendsCircle-content-item-detail">
		<view class="friendsCircle-content-item-detail-item" v-if="content.likeList&&content.likeList.length>0">
			<view class="friendsCircle-like-icon wxfont zan"></view>
			<view class="friendsCircle-like">
				<image class="friendsCircle-like-img" mode="aspectFill" v-for="(z,zindex) in content.likeList" :src="z.portrait"></image>
			</view>
		</view>
		<view class="friendsCircle-content-item-detail-item" v-if="content.replyList&&content.replyList.length>0">
			<view class="friendsCircle-comment-icon wxfont pinglun"></view>
			<view class="friendsCircle-comment">
				<view class="friendsCircle-comment-item" v-for="(c,ci) in content.replyList" :key="ci">
					<image class="friendsCircle-comment-img" :src="c.portrait" mode="aspectFill"></image>
					<view class="friendsCircle-comment-item-text">
						<view class="friendsCircle-comment-item-name">
							<text class="friendsCircle-comment-text">{{c.nickName}}</text>
							<text class="friendsCircle-comment-item-time">{{c.createTime}}</text>
						</view>
						<view style="width: 100%;" @click="replyclick(c,ci)">
							<view class="friendsCircle-comment-feedback" v-if="c.replyType=='2'">
								<text>回复</text>
								<text class="friendsCircle-comment-text">{{c.toNickName}}</text>
							</view>
							<text class="friendsCircle-comment-textx">{{c.content}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view style="height: 120rpx;"></view>
	<view class="zfb-tk-send-tool" :style="{bottom:keyboardHeight+'px'}">
		<form @submit="sendMsg(msg)">
			<view class="zfb-tk-send-tool-c">
				<view class="zfb-tk-send-tool-input-box" @click="msgFocus=true">
					<textarea class="zfb-tk-send-tool-input" :adjust-position="false" :focus="msgFocus" v-model="msg" :placeholder="placeholder" confirm-type="send" @confirm="sendMsg(msg)" hold-keyboard :maxlength="-1" auto-height />
				</view>
				<view class="zfb-tk-send-tool-text" @click="sendMsg(msg)" :style="{ background: msg !== '' ? '#1BC418' : '#F7F7F7', color: msg !== '' ? '#fff' : '#ddd', 'border-color': msg !== '' ? '#1BC418' : '#ddd' }">发送</view>
			</view>
		</form>
	</view>
</template>

<script>
export default {
	// 朋友圈列表内容区
	data() {
		return {
			timer:null,
			placeholder:'评论',
			keyboardHeight:0,
			msg: '',
			type:'msg',
			replydata:'',
			msgFocus:false,
			tabToolIndex: false,
			content:this.detail
		};
	},
	props:{
		detail:{
			type:Object
		}
	},
	watch:{
		detail(v){
			this.content=v
		}
	},
	computed:{
		userInfo(){
			return this.$store.state.userInfo
		}
	},
	mounted() {
		// #ifdef APP-PLUS
		uni.onKeyboardHeightChange(res => {
		  this.keyboardHeight=res.height
		})
		// #endif
	},
	methods: {
		scrolltoBottom() {
			if (this.timer) {
				clearTimeout(this.timer);
			}
			this.$nextTick(()=>{
				this.timer = setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 999999,
						duration: 10
					});
					this.$forceUpdate()
				}, 100);
			})
		},
		replyclick(e,ci){
			if(e.canDeleted=='Y'){
				this.hidenTool()
				uni.showActionSheet({
					itemList: ['复制','删除'],
					success: (res) => {
						switch (res.tapIndex){
							case 0:
							uni.setClipboardData({
								data: e.content,
								success: function() {
									uni.showToast({
										title: '复制成功',
										icon: 'none',
										position: 'bottom'
									})
								}
							});
								break;
							case 1:
							this.$http.request({
								url: '/topic/removeReply/'+e.replyId,
								success: (res) => {
									if (res.data.code == 200) {
										uni.showToast({
											title:'删除成功',
											icon:'none'
										})
										this.content.replyList.splice(ci,1)
									}
								}
							});
								break;
							default:
								break;
						}
					}
				});
			}else{
				this.replydata=e
				this.type='reply'
				this.placeholder='回复'+e.nickName
				this.$nextTick(()=>{
					this.msgFocus=true
				})
			}
		},
		gofriend(e){
			uni.navigateTo({
				url:'../../wx/personInfo/detail?param='+e.userId
			})
		},
		pimgs(arr,ii){
			var imgs=[]
			for (var i = 0; i < arr.length; i++) {
				imgs.push(arr[i].url)
			}
			this.$fc.previewImages(imgs, ii)
		},
		goMap(e) {
			uni.openLocation({
				latitude: e.latitude,
				longitude: e.longitude,
				success: function() {}
			});
		},
		openVideo(e){
			this.$fc.plusDownload({onlinePath:e}).then(res=>{
				this.$fc.plusOpenFile({filePath:res})
			})
		},
		tabTool(e) {
			this.tabToolIndex=!this.tabToolIndex
		},
		comment(e) {
			this.hidenTool()
			//评论
			this.type='msg'
			this.placeholder='评论'
			this.$nextTick(()=>{
				this.msgFocus=true
			})
		},
		zan(e,i){//点赞
			switch (e.like){
				case 'N':
				this.$http.request({
					url: '/topic/like/'+e.topicId,
					success: (res) => {
						if (res.data.code == 200) {
							var like=e.like=='N' ? e.like='Y' : e.like='N'
							this.content.like=like
							this.content.likeList.push({
								userId: this.userInfo.userId,
								nickName: this.userInfo.nickName,
								portrait: this.userInfo.portrait
							})
						}
					}
				});
					break;
				case 'Y':
				this.$http.request({
					url: '/topic/cancelLike/'+e.topicId,
					success: (res) => {
						if (res.data.code == 200) {
							var like=e.like=='N' ? e.like='Y' : e.like='N'
							this.content.like=like
							var thisObj=this.$fc.arrFindkey({arr:this.content.likeList,key:'userId',val:this.userInfo.userId})
							this.content.likeList.splice(thisObj.index,1)
						}
					}
				});
					break;
				default:
					break;
			}
		},
		sendMsg(e) {
			if (!e) {
				return;
			}
			var replyId=''
			var replyType=''
			if(this.type=='msg'){
				replyId=this.content.topicId
				replyType='1'
			}
			if(this.type=='reply'){
				replyId=this.replydata.replyId
				replyType='2'
			}
			this.$http.request({
				url: '/topic/reply',
				method: 'POST',
				data:JSON.stringify({
					replyId: replyId, 
					replyType: replyType, 
					content: e
				}),
				success: (res) => {
					if (res.data.code == 200) {
						this.content.replyList.push(res.data.data)
						this.$nextTick(()=>{
							this.scrolltoBottom()
						})
					}
				}
			});
			this.msg=''
		},
		hidenTool() {//隐藏选项和输入框
			this.tabToolIndex = false;
		}
	}
};
</script>

<style scoped lang="scss">
.zfb-tk-send-tool {
	background: #f7f7f7;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
}

.zfb-tk-send-tool-c {
	padding: 16rpx 12rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	border: 1px #ddd solid;
	border-left: none;
	border-right: none;
}

.zfb-tk-send-tool-c .zfb-tk-send-tool-btn {
	transition: color 0.5s;
}

.zfb-tk-send-tool .zfb-tk-send-tool-input {
	padding:0 24rpx;
	box-sizing: border-box !important;
	width: 100%;
	background: #fff;
}

.zfb-tk-send-tool-text {
	white-space: nowrap;
	padding: 10rpx 24rpx;
	border-radius: 12rpx;
	border: 1px #ddd solid;
	background: #f7f7f7;
	color: #ddd;
}
.friendsCircle-content-item{
		display: flex;
		flex-direction: row;
		padding:24rpx;
	}
	.friendsCircle-content-item-detail{
		margin:0 24rpx;
		border-radius: 8rpx;
		margin-top: 24rpx;
		padding-bottom: 0;
		margin-bottom: 1px;
	}
	.friendsCircle-content-avatar{
		border-radius: 10rpx;
		width: 90rpx;
		height: 90rpx;
		min-width: 90rpx;
	}
	.friendsCircle-content-right{
		display: flex;flex-direction: column;
		padding-left: 18rpx;
		flex: 1;
		box-sizing: border-box;
	}
	.friendsCircle-content-nikeName{
		font-size: 32rpx;
		color: #5F698C;
		margin-bottom: 10rpx;
	}
	.friendsCircle-content-text{
		font-size: 32rpx;
		color: #333;
	}
	.friendsCircle-content-imgs{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1;
		margin-top: 24rpx;
	}
	.friendsCircle-content-img{
		max-width: 100%;
	}
	.friendsCircle-content-img.fci1{
		height: 550rpx;
		max-width: 500rpx;
		margin-right: 5px;
	}
	.friendsCircle-content-img.fci2{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci2:nth-child(3n){
		margin-right: 0;
	}
	.friendsCircle-content-img.fci3{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci3:nth-child(3n){
		margin-right: 0;
	}
	.friendsCircle-content-img.fci4{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci4:nth-child(2n){
		margin-right: 185rpx;
	}
	.friendsCircle-content-img.fci5{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci5:nth-child(3n){
		margin-right: 0;
	}
	.friendsCircle-content-img.fci6{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci6:nth-child(3n){
		margin-right: 0;
	}
	.friendsCircle-content-img.fci7{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci7:nth-child(3n){
		margin-right: 0;
	}
	.friendsCircle-content-img.fci8{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci8:nth-child(3n){
		margin-right: 0;
	}
	.friendsCircle-content-img.fci9{
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.friendsCircle-content-img.fci9:nth-child(3n){
		margin-right: 0;
	}
	.friendsCircle-content-location{
		font-size: 24rpx;
		color: #5F698C;
		margin-top: 12rpx;
	}
	.friendsCircle-content-time{
		font-size: 24rpx;
		color: #666666;
		margin-right: auto;
	}
	
	.friendsCircle-content-tools{
		margin-top: 24rpx;
		display: flex;flex-direction: row;align-items: center;
	}
	.friendsCircle-content-tool{
		padding:4rpx 16rpx;
		border-radius: 10rpx;
		background-color: #F8F8FA;
		color: #63678C;
		display: flex;flex-direction: row;
		position: relative;
	}
	.tabon .friendsCircle-content-tool-absolute{
		display: block;
	}
	.friendsCircle-content-tool-absolute{
		position: absolute;
		right: 100%;
		top: 50%;
		transform: translateY(-50%);
		display: none;
	}
	.friendsCircle-popup{
		margin-right: 24rpx;
		border-radius: 12rpx;
		background-color: rgba(0,0,0,0.7);
		height: 75rpx;
		display: flex;flex-direction: row;align-items: center;
		padding:0 24rpx;
	}
	.friendsCircle-popup-item{
		color: #fff;
		padding:0 25rpx;
		height: 100%;
		display: flex;flex-direction: row;align-items: center;
	}
	.friendsCircle-popup-item:nth-child(1):active .friendsCircle-popup-icon{
		font-size: 56rpx;
	}
	.friendsCircle-popup-icon{
		font-size: 46rpx;
	}
	.friendsCircle-popup-text{
		white-space: nowrap;
	}
	.friendsCircle-like{
		display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;
		
	}
	.friendsCircle-like-icon,.friendsCircle-like-text,.friendsCircle-comment-text{
		color: #5F698C !important;
		font-size: 24rpx;
	}
	.friendsCircle-comment-feedback .friendsCircle-comment-text{
		margin:0 6rpx;
	}
	.friendsCircle-comment-feedback .friendsCircle-comment-text::after{
		content: ":";
		color: #333;
	}
	.friendsCircle-comment-item-name{
		display: flex;flex-direction: row;
		width: 100%;
	}
	.friendsCircle-comment-item-time{
		margin-left: auto;
		font-size: 24rpx;
		color: #999;
	}
	.friendsCircle-like-icon,.friendsCircle-comment-icon{
		width: 40rpx;
		min-width: 40rpx;
		height: 60rpx;
		display: flex;flex-direction: row;align-items: center;justify-content: center;
		font-size: 32rpx;
	}
	.friendsCircle-like-text{
		margin-left: 4rpx;
	}
	.friendsCircle-like-text::after{
		content: ",";
	}
	.friendsCircle-like-text:nth-last-child(1)::after{
		content: "";
	}
	.friendsCircle-comment{
		background-color: #F7F7F7;
		border-radius: 8rpx;
		flex: 1;
	}
	.friendsCircle-comment-item{
		font-size: 28rpx;
		padding: 12rpx;
		white-space: pre-wrap;
		display: flex;flex-direction: row;
	}
	.friendsCircle-comment-feedback{
		display: inline-block;
	}
	.friendsCircle-comment-feedback text{
		font-size: 28rpx;
		color: #333;
	}
	.friendsCircle-comment-textx{
		word-break: break-all;
	}
	.friendsCircle-like-img,.friendsCircle-comment-img{
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
		margin-left: 10rpx;
		margin-bottom: 12rpx;
	}
	.friendsCircle-comment-img{
		margin-right: 12rpx;
		margin-left: 0px;
	}
	.friendsCircle-content-item-detail-item{
		display: flex;flex-direction: row;
		padding: 12rpx;
		padding-bottom: 0;
		margin-bottom: 4rpx;
		border-radius: 8rpx;
		background-color: #F7F7F7;
	}
	.friendsCircle-comment-item-text{
		flex: 1;
		display: flex;flex-direction: column;
		align-items:flex-start;
	}
	.friendsCircle-content-video{
		height: 550rpx;
		max-width: 400rpx;
		position: relative;
		margin-right: 14rpx;
		margin-top: 24rpx;
	}
	.friendsCircle-content-video-img{
		width: 100%;
		height: 100%;
	}
	.friendsCircle-content-video-icon{
		z-index: 1;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60rpx !important;
		height: 60rpx !important;
		transform: translate(-50%,-50%);
	}
	.zfb-tk-send-tool-input-box{
		overflow: auto;
		width: 100%;
		margin: 0 12rpx;
		min-height: 75rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding-top: 18rpx;
		max-height: 225rpx;
		box-sizing: border-box;
	}
</style>
